<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/wxc.css" rel="stylesheet" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="layui/layui.js" ></script>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript" src="js/publicurl.js" ></script>
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.content-bg{
				/*background: url(images/bg.jpg) center center no-repeat;*/
			}
			.public-padding{
				padding-top: 40%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav public-bgcolor">
			<h1 class="mui-title" style="color: cornflowerblue;">注册</h1>
		</header>
		<div class="mui-content content-bg public-padding">
			<div class="protocolpanel" id="protocolpanel">
				<iframe src="protocol.html" scrolling="auto" height="500px"></iframe>
				<p>
					<button id="agreePro">同意</button>
					<button id="confirPro">关闭</button>
				</p>
			</div>
			<div class="register-logo">
				<img src="images/logo.png" />
			</div>
			<div id='msgtips' style='padding:0px 5px;display:none;color: white;position: fixed;z-index: 1000;width:auto;background: rgba(135,135,131,0.8);border-radius: 10px;text-align: center;height: 40px;line-height: 40px;left: 30%;top: 45%;'>
				
			</div>
			<div class="register-form">
				<div id='error' style='padding:0px 5px;display:none;color: red;position: absolute;z-index: 1000;width:auto;background: rgba(135,135,131,0.8);border-radius: 10px;text-align: center;height: 40px;line-height: 40px;left: 35%;top: 41%;'></div>
				<form>
					<div class="register-form-b">
						<div class="register-form-b-l">
							账号
						</div>
						<div class="register-form-b-r">
							<input type="text" id="registPhone" class="phone" placeholder="请输入手机号"/>
							
						</div>
						<button class="yzm" type="button"  id="checkCode">获取验证码</button>
					</div>
					<div class="register-form-b">
						<div class="register-form-b-l">
							验证码
						</div>
						<div class="register-form-b-r">
							<input type="text" id="code" placeholder="输入验证码"/>
						</div>
					</div>
					<!---->
					<div class="register-form-b">
						<div class="register-form-b-l">
							密码
						</div>
						<div class="register-form-b-r">
							<input type="password" id="psw" placeholder="输入密码"/>
						</div>
					</div>
					<div class="protocol">
						
						<input type="checkbox" id="agreeCheck" />
						<a href="javascript:;" id="protocolbtn">用户相关协议</a>
					</div>
					<div class="btn">
						<button type="button" id="submitBtn">提交</button>
						<p>
							<a href="login.html">去登录？</a>
						</p>
					</div>				
				</form>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					
					var regButton = doc.getElementById('reg');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var passwordConfirmBox = doc.getElementById('password_confirm');
					var emailBox = doc.getElementById('email');
					
				});
			}(mui, document));
			var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
			var pswreg = /^(\w){6,12}$/;
			
			if(!reg.test($("#registPhone").val())) {
				$("#checkCode").attr("disabled",true);
			}
			/*实时监听手机号输入*/
			$("#registPhone").bind("input propertychange",function(event){
			       var phone = $("#registPhone").val();
			       if(reg.test(phone)) {
						mui.ajax(puburl.url+'/dangxia/user/checkPhone', {
							data: {
								username: phone
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								if(data.code == 0) {
									/*mui.openWindow({
										url: 'index.html',
									});*/
									focusevent("registPhone");
									$("#checkCode").attr("disabled",false);
								}else{
									$("#checkCode").attr("disabled",true);
									msg("registPhone",data.msg);
								}
		
							},
							error: function(xhr, type, errorThrown) { //异常处理；
								console.log(type);
								alert("连接异常");
							}
						});
						
					} else {
						$("#checkCode").attr("disabled",true);
					}
			});
			var tm = 60;
			var flag = true;
			var regcode;
			/*监听获取验证码按钮*/
			$("#checkCode").click(function() {
				
				$("#checkCode").attr("disbled",true);
				var phone = $("#registPhone").val();
				if(flag) {
					var timer = setInterval(function() {
						if(tm==60 && flag) {
							flag = false;
							mui.ajax(puburl.url+'/dangxia/phone/getcode', {
								data: {
									"username": phone
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								success: function(data) {
									var data1 = JSON.parse(data.msg);
									/*验证成功*/
									if(data1.return_code=="00000") {
										msgtips("发送成功");
										regcode = data.code;
									} else {
										msgtips("<span style='color:red'>发送失败</span>");
										flag = true;
										tm=60;
										clearInterval(timer);
									}
								},
								error: function(xhr, type, errorThrown) { //异常处理；
									console.log(type);
								}
							});
						} else if(tm==0) {
							$("#checkCode").attr("disbled",true);
							$("#checkCode").html("获取验证码");
							flag=true;
							clearInterval(timer);
							tm=60;
							
						}else{
							$("#checkCode").html(tm+"s后重新获取");
							tm--;
						}
					},1000);
				
				}
				
			});
			/*用户相关协议多选框*/
			$("#protocolbtn").click(function() {
				$("#protocolpanel").show(800);
			});
			$("#confirPro").click(function() {
				$("#protocolpanel").hide(800);
			});
			$("#agreePro").click(function() {
				$("#protocolpanel").hide(800);
				$("#agreeCheck").attr("checked","checked");
				
			});
			
			/*监听获得焦点事件*/
			focusevent("registPhone");
			focusevent("code");
			focusevent("psw");
			/*密码框聚焦事件*/
			$("#psw").focus(function() {
				msgtips("请输入6-12位字母或字符串格式密码")
			});
			/*监听提交按钮的点击事件*/
			layui.use(['layer'],function() {
				var layer = layui.layer;
				$("#submitBtn").click(function() {

					var phone=$("#registPhone").val();
					var code = $("#code").val();
					var psw = $("#psw").val();
					
					if(phone==null || phone.trim()=='') {
						msg("registPhone","手机号不能为空");
						
						return;
					}
					else if(!reg.test(phone)) {
						msg("registPhone","手机号格式不正确");
						return;
					}
					if(code==null || code.trim()=='') {
						msg("code","验证码不能为空");
						return;
					}
					if(regcode!=code) {
						msgtips("<span style='color:red'>验证码不正确！</span>");
						return;
					}
					if(psw==null || psw.trim()=='') {
						msg("psw","密码不能为空");
						return;
					} 
					if(!pswreg.test(psw)) {
						msg("psw","密码格式有误");
						return;
					}
					if(!$("#agreeCheck").prop("checked")) {
						msg("agreeCheck","请先同意用户协议");
						return;
					}
					var cload = layer.load(2,{
						time:10000
					});
					$.post(puburl.url+"/dangxia/user/addUser",
						{"username":phone,"psw":psw},
						function(data) {
							if(data.code==0) {
								msgtips(data.msg+"正在跳往登录页面...");
								setTimeout(function() {
									window.location.replace("login.html");
								},1500);
								layer.close(cload);
							} else {
								msgtips(data.msg);
								layer.close(cload);
							}
						}
					);
				});
			});
			
			/*封装错误提示框函数*/
			function msg(idname,content) {
				$("#error").html(content);
				$("#error").fadeIn();
				setTimeout(function() {
						$("#error").fadeOut();
				},1500);
				$("#"+idname).css("border","1px solid red");
			}
			/*封装普通提示框*/
			function msgtips(content) {
				$("#msgtips").html(content);
				$("#msgtips").fadeIn();
				setTimeout(function() {
						$("#msgtips").fadeOut();
				},2000);
			}
			/*封装聚焦事件*/
			function focusevent(idname) {
				$("#"+idname).focus(function() {
					$(this).css("border","0px");
				});
			}
		</script>
	</body>

</html>